<template>
  <f7-page subnavbar class="bg-color-white">
    <f7-navbar :title="$t('m.o1')" back-link=" ">
      <f7-subnavbar class="subnav-tabs">
        <van-tabs v-model="orderTab" color="#1898ff" :swipe-threshold	="5" @change="handleChangeTab">
          <van-tab :title="$t('m.o2')"></van-tab>
          <van-tab :title="$t('m.o3')"></van-tab>
          <van-tab :title="$t('m.o4')"></van-tab>
          <van-tab :title="$t('m.o5')"></van-tab>
          <van-tab :title="$t('m.o6')"></van-tab>
        </van-tabs>
      </f7-subnavbar>
    </f7-navbar>

    <no-content-tips v-if="ordersList.length === 0"></no-content-tips>
    <div class="margin-t20 orders-list" v-else>
      <ul>
        <li v-for="(item, index) in ordersList" :key="index">
          <p class="status-p">{{$t('m.o7')}}：{{item.no}} <span>{{item.status | orderStatus}}</span></p>
          <van-card
            :num="item.num"
            :title="item.gname"
            :thumb="item.pic"
            @click="viewOrderDetail(item.id)"
          >
            <div slot="price">
              <h2 class="order-price">{{item.money}} {{$t('m.o8')}}</h2>
            </div>
            <div slot="footer">
              <van-button size="mini" v-if="item.status === '2'" round type="info" @click="handleOperating(item.id,3)">{{$t('m.o9')}}</van-button>
              <van-button size="mini" v-if="item.status === '1'" round type="danger" @click="handleOperating(item.id,-1)">{{$t('m.cancel')}}</van-button>
            </div>
          </van-card>
        </li>
      </ul>
    </div>
  </f7-page>
</template>

<script>
  import { getOrders, setOrderStatus } from "../api/my";

  export default {
    name: "orders",
    data () {
      return {
        orderTab: 0,
        ordersList: []
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init(status) {
        getOrders({status}).then(res => {
          this.ordersList = res.data;
        })
      },
      handleChangeTab(index, title) {
        this.init(index !== 4 && index !== 0 ? index: index ===0 ? undefined: '-1');
      },
      handleOperating(order_id, status) {
        this.$dialog.confirm({
          message: `${this.$t('m.o10')}${status === 3?this.$t('m.o9'):this.$t('m.o11')}吗？`
        }).then(() => {
          // on confirm
          setOrderStatus({order_id,status}).then(() => {
            this.init();
          })
        }).catch(() => {
          // on cancel
        });
      },
      viewOrderDetail(order_id) {
        this.$f7router.navigate('/order-details/', {context: {order_id}})
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
